import { usePlanApi } from './usePlanApi';
import { usePlanBaseApi } from './usePlanBaseApi';
export const planChangeNotify = (Variable, emit) => {
  const {
    selectHelper,
    renameProxy,
    isPublic,
    saveAsPlan,
    isDefault,
    planIsChange,
    currectPlan,
    queryPlanList,
    showDialog,
    $q,
    modifyPlan,
    Ignore,
    isIgnore,
    mappingProps,
    showRenameDialog,
    targetName,
    isReset,
    isCreate,
  } = Variable;
  const {
    queryPlanSave,
    queryPlanSaveAs,
    getQueryPlanList,
    CreateOrUpdateQueryPlan,
    UpdateQueryPlan,
    synchronizationMixView,
    synchronizationFilter,
  } = usePlanApi(Variable, emit);
  const { preventDefault } = usePlanBaseApi(Variable, emit);
  const planChangeNotify = () => {
    return (
      <span
        style={
          'position: fixed; bottom: -30px;border-radius: 2px;color:  rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));z-index: 1000;'
        }
        class='tips_planChange_content'
      >
        <span style='     flex: none;   background: rgb(255, 244, 220);position: relative;display: flex;align-items: center;justify-content: start;padding: 4px 0; padding-right: 30px;'>
          {$q.lang.queryPlan.notify.planChange}{' '}
          <i
            onClick={e => {
              e.stopPropagation();
              e.preventDefault();
              modifyPlan.value.IsAuth ? queryPlanSave() : queryPlanSaveAs();
              return false;
            }}
          >
            {' '}
            {modifyPlan.value.IsAuth
              ? $q.lang.queryPlan.title.save
              : $q.lang.queryPlan.title.saveAs}
          </i>{' '}
          <i
            style='color: rgb(96, 98, 102);'
            onClick={e => {
              e.stopPropagation();
              e.preventDefault();
              Funcs.Confirm(
                $q.lang.queryPlan.notify.notifyIgnoreTitle,
                $q.lang.queryPlan.notify.ignoreContent,
                () => {
                  Ignore.value = false;
                },
                () => {},
                true,
                {
                  confirmButtonText: $q.lang.queryPlan.notify.closeIgnore,
                  cancelButtonText: $q.lang.queryPlan.notify.keepIgnore,
                },
              );
              return false;
            }}
            tabindex={mappingProps.tabIndex}
          >
            {$q.lang.queryPlan.title.ignore}
          </i>
          <t-icon
            tabindex={mappingProps.tabIndex}
            name='close'
            onClick={e => {
              isIgnore.value = !isIgnore.value;
              e.stopPropagation();
              e.preventDefault();
              return false;
            }}
            style='position:absolute;right:20px'
          />
        </span>
      </span>
    );
  };
  const renameDialog = () => {
    return (
      <tm-dialog
        v-model:show={showRenameDialog.value}
        onHide={() => {
          showRenameDialog.value = false;
        }}
        onShow={() => {
          showRenameDialog.value = true;
        }}
      >
        <t-card style='width: 420px;'>
          <t-card-section
            class='row items-center q-pb-none tr-card-header'
            style='display:flex'
          >
            <div class='plan_dialog_header_title'>
              {$q.lang.queryPlan.dialog.reName}
            </div>
            <t-space />
            <t-icon
              name='close'
              onClick={() => {
                showRenameDialog.value = false;
              }}
              style='font-size:14px'
            />
          </t-card-section>

          <t-card-section class='tr-card-content'>
            <t-input
              class='query_plan_target_focuse_dom'
              tabIndex='0'
              borderType='borderless'
              labelPosition='top'
              v-model={targetName.value}
              label={$q.lang.queryPlan.dialog.planName}
            />
          </t-card-section>

          <t-card-actions
            align='right'
            class='bg-white text-teal'
            style='padding:12px 24px 16px 24px'
          >
            <t-button
              class='submit tr-button-text'
              style='color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));border:1px solid #DCDCDC;padding:8px 6px'
              onClick={() => {
                showRenameDialog.value = false;
              }}
              ripple={false}
              tabIndex='0'
            >
              {$q.lang.label.cancel}
            </t-button>
            <t-button
              class='tr-button-primary'
              style='padding:8px 6px'
              tabIndex='0'
              onClick={async () => {
                const e = {
                  plan: renameProxy.value,
                };
                const data = targetName.value;
                if (!targetName.value.trim()) {
                  Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.title.searchPlaceholder,
                    'warning',
                  );
                  return;
                }
                if (data.length > 11) {
                  return Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.dialog.planNameLengthCheck,
                    'warning',
                  );
                }
                if (e.plan.PlanRange == 2) {
                  if (queryPlanList.value.some(item => item.Name == data)) {
                    return Funcs.Notify(
                      $q.lang.selectHelper.warning,
                      $q.lang.queryPlan.dialog.planIsExist,
                      'warning',
                    );
                  }
                } else {
                  if (
                    queryPlanList.value.some(
                      item =>
                        item.Name == data &&
                        (item.PlanRange == e.plan.PlanRange ||
                          item.PlanRange == 2 ||
                          item.PlanRange == 3),
                    )
                  ) {
                    return Funcs.Notify(
                      $q.lang.selectHelper.warning,
                      $q.lang.queryPlan.dialog.planIsExist,
                      'warning',
                    );
                  }
                }

                await UpdateQueryPlan(e.plan, {
                  PlanName: targetName.value,
                });
                queryPlanList.value.forEach(
                  item => item.ID == e.plan.ID && (item.Name = e.plan.Name),
                );
                isReset.value = true;
                let _planIsChange = planIsChange.value;
                if (modifyPlan.value.ID == e.plan.ID) {
                  modifyPlan.value.Name = targetName.value;
                }
                planIsChange.value = _planIsChange;
                setTimeout(() => {
                  isReset.value = false;
                  planIsChange.value = _planIsChange;
                }, 100);
                showRenameDialog.value = false;
              }}
              onkeydown={e => {
                preventDefault(e);
              }}
            >
              {$q.lang.label.ok}
            </t-button>
          </t-card-actions>
        </t-card>
      </tm-dialog>
    );
  };
  const saveAsComponent = () => {
    return (
      <tm-dialog
        v-model:show={showDialog.value}
        onHide={() => {
          showDialog.value = false;
        }}
        onShow={() => {
          showDialog.value = true;
        }}
      >
        <t-card style='width: 420px;'>
          <t-card-section
            class='row items-center q-pb-none tr-card-header'
            style='display:flex'
          >
            <div class='plan_dialog_header_title'>
              {isCreate.value
                ? $q.lang.queryPlan.title.createPlan
                : $q.lang.queryPlan.dialog.planSaveAs}
            </div>
            <t-space />
            <t-icon
              name='close'
              onClick={() => {
                showDialog.value = false;
              }}
              style='font-size:14px'
            />
          </t-card-section>

          <t-card-section class='tr-card-content'>
            <t-input
              class='query_plan_target_focuse_dom'
              tabIndex='0'
              borderType='borderless'
              labelPosition='top'
              v-model={targetName.value}
              label={$q.lang.queryPlan.dialog.planName}
            />
          </t-card-section>
          {(() => {
            if (
              queryPlanList.value
                .filter(item => item.PlanRange != 3)
                .every(item => item.IsAuth)
            ) {
              return (
                <t-card-section class='tr-card-content'>
                  <t-select
                    style='width:100%'
                    borderless
                    label={$q.lang.queryPlan.dialog.planType}
                    labelPosition='top'
                    v-model={isPublic.value}
                    itemsDataSourceType='static'
                    staticItems={[
                      {
                        label: $q.lang.queryPlan.dialog.publicPlan,
                        value: true,
                      },
                      {
                        label: $q.lang.queryPlan.dialog.previtePlan,
                        value: false,
                      },
                    ]}
                  ></t-select>
                </t-card-section>
              );
            }
          })()}
          {(() => {
            if (mappingProps.planType != '1') {
              return (
                <t-card-section class='tr-card-content'>
                  <t-toggle
                    tabIndex='0'
                    labelPosition='top'
                    style='opacity:100%'
                    label={$q.lang.queryPlan.dialog.defaultPlan}
                    labelPosition='left'
                    v-model={isDefault.value}
                  ></t-toggle>
                </t-card-section>
              );
            }
          })()}
          <t-card-actions
            align='right'
            class='bg-white text-teal'
            style='padding:12px 24px 16px 24px'
          >
            <t-button
              class='submit tr-button-text'
              style='color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));border:1px solid #DCDCDC;padding:8px 6px'
              onClick={() => {
                showDialog.value = false;
              }}
              ripple={false}
              tabIndex='0'
            >
              {$q.lang.label.cancel}
            </t-button>
            <t-button
              class='tr-button-primary'
              style='padding:8px 6px'
              tabIndex='0'
              onClick={async () => {
                if (
                  queryPlanList.value.some(
                    item =>
                      item.Name == targetName.value &&
                      item.PlanRange == (isPublic.value ? '0' : '1'),
                  )
                ) {
                  return Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.dialog.planIsExist,
                    'warning',
                  );
                }
                if (!targetName.value.trim()) {
                  Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.title.searchPlaceholder,
                    'warning',
                  );
                  return;
                }
                const data = targetName.value;
                if (data.length > 11) {
                  return Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.dialog.planNameLengthCheck,
                    'warning',
                  );
                }
                const plan = Object.assign({}, saveAsPlan.value);
                if (saveAsPlan.value.ID == modifyPlan.value.ID) {
                  synchronizationMixView(plan, true);
                  synchronizationFilter(plan, true);
                }

                plan.Name = targetName.value;
                plan.PlanRange = isPublic.value ? '0' : '1';
                plan.isDefault = isDefault.value;
                if (isCreate.value) {
                  plan.PortalFilterContent = JSON.stringify({});
                  plan.PortalId = '';
                }
                CreateOrUpdateQueryPlan(true, plan); // Fix: Pass a third argument, such as null, to the CreateOrUpdateQueryPlan function.
              
                // queryPlanList.value = await getQueryPlanList();
                // modifyPlan.value = Object.assign({}, plan);
                // currectPlan.value = Object.assign({}, plan);
                planIsChange.value = false;
                showDialog.value = false;
              }}
              onkeydown={e => {
                preventDefault(e);
              }}
            >
              {$q.lang.label.ok}
            </t-button>
          </t-card-actions>
        </t-card>
      </tm-dialog>
    );
  };
  const saveAsComponentMobile = () => {
    return (
      <tm-dialog
        class='select_helper_popup select_helper_popup_m'
        style='height:100vh !important'
        position='right'
        v-model:show={showDialog.value}
        // 如果设置为false 组件限制无法全屏
        maximized={true}
        onShow={() => {}}
        onHide={() => {}}
      >
        <t-card
          style='width: 100vw;    background: #fff;height: 100vh !important;'
          class='queryplanContent_m'
        >
          <header>
            <i
              class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowLeft??'icon-t-arrow-left'}`}
              onClick={() => {
                showDialog.value = false;
              }}
            ></i>
            <span>{$q.lang.queryPlan.dialog.planSaveAs}</span>
            <span
              class='submit'
              onClick={async () => {
                if (
                  queryPlanList.value.some(
                    item =>
                      item.Name == targetName.value &&
                      item.PlanRange == (isPublic.value ? '0' : '1'),
                  )
                ) {
                  return Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.dialog.planIsExist,
                    'warning',
                  );
                }
                const data = targetName.value;
                if (data.length > 11) {
                  return Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.dialog.planNameLengthCheck,
                    'warning',
                  );
                }
                const plan = Object.assign({}, saveAsPlan.value);

                plan.Name = targetName.value;
                plan.PlanRange = isPublic.value ? '0' : '1';
                plan.isDefault = isDefault.value;

                await CreateOrUpdateQueryPlan(true, plan); // Fix: Pass a third argument, such as null, to the CreateOrUpdateQueryPlan function.
                queryPlanList.value = await getQueryPlanList();
                modifyPlan.value = Object.assign({}, plan);
                currectPlan.value = Object.assign({}, plan);

                showDialog.value = false;
              }}
            >
              {' '}
              {$q.lang.label.ok}
            </span>
          </header>
          <t-card-section>
            <t-input
              class={'tr-input-form'}
              class='plan_rename_m'
              borderType='borderless'
              clearable
              labelPosition='top'
              v-model={targetName.value}
              label={$q.lang.queryPlan.dialog.planName}
            />
          </t-card-section>
          {(() => {
            if (queryPlanList.value.every(item => item.IsAuth)) {
              return (
                <t-card-section>
                  <t-select
                    style='width:100%'
                    borderless
                    class={'tr-select-enterform'}
                    label={$q.lang.queryPlan.dialog.planType}
                    labelPosition='top'
                    v-model={isPublic.value}
                    itemsDataSourceType='static'
                    staticItems={[
                      {
                        label: $q.lang.queryPlan.dialog.publicPlan,
                        value: true,
                      },
                      {
                        label: $q.lang.queryPlan.dialog.previtePlan,
                        value: false,
                      },
                    ]}
                  ></t-select>
                  {/* <t-toggle
                        labelPosition='top'
                        style='opacity:100%'
                        label='方案类型'
                        labelPosition='left'
                        v-model={isPublic.value}
                      ></t-toggle> */}
                </t-card-section>
              );
            }
          })()}
          {(() => {
            if (mappingProps.planType != '1') {
              return (
                <t-card-section>
                  <t-toggle
                    labelPosition='top'
                    style='opacity:100%'
                    label={$q.lang.queryPlan.dialog.defaultPlan}
                    labelPosition='left'
                    v-model={isDefault.value}
                  ></t-toggle>
                </t-card-section>
              );
            }
          })()}
        </t-card>
      </tm-dialog>
    );
  };
  const renameDialogMobile = () => {
    return (
      <tm-dialog
        class='select_helper_popup_m'
        v-model:show={showRenameDialog.value}
        onHide={() => {
          showRenameDialog.value = false;
        }}
        onShow={() => {
          showRenameDialog.value = true;
        }}
        position='right'
        // 如果设置为false 组件限制无法全屏
        maximized={true}
      >
        <t-card
          style='width: 100vw;    background: #fff;height:100vh !important'
          class='queryplanContent_m'
        >
          <header>
            <i
              class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowLeft??'icon-t-arrow-left'}`}
              onClick={() => {
                showRenameDialog.value = false;
              }}
            ></i>
            <span>{$q.lang.queryPlan.dialog.reName}</span>
            <span
              class='submit'
              onClick={async () => {
                const e = {
                  plan: renameProxy.value,
                };
                const data = targetName.value;
                if (data.length > 11) {
                  return Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.dialog.planNameLengthCheck,
                    'warning',
                  );
                }
                if (e.plan.PlanRange == 2) {
                  if (queryPlanList.value.some(item => item.Name == data)) {
                    return Funcs.Notify(
                      $q.lang.selectHelper.warning,
                      $q.lang.queryPlan.dialog.planIsExist,
                      'warning',
                    );
                  }
                } else {
                  if (
                    queryPlanList.value.some(
                      item =>
                        item.Name == data &&
                        (item.PlanRange == e.plan.PlanRange ||
                          item.PlanRange == 2 ||
                          item.PlanRange == 3),
                    )
                  ) {
                    return Funcs.Notify(
                      $q.lang.selectHelper.warning,
                      $q.lang.queryPlan.dialog.planIsExist,
                      'warning',
                    );
                  }
                }

                await UpdateQueryPlan(e.plan, {
                  PlanName: targetName.value,
                });
                queryPlanList.value.forEach(
                  item => item.ID == e.plan.ID && (item.Name = e.plan.Name),
                );
                if (modifyPlan.value.ID == e.plan.ID) {
                  modifyPlan.value.Name = targetName.value;
                }
                setTimeout(() => {
                  // planIsChange.value = _planIsChange;
                }, 100);
                showRenameDialog.value = false;
              }}
            >
              {' '}
              {$q.lang.label.ok}
            </span>
          </header>

          <t-card-section class='tr-card-content'>
            <t-input
              class='plan_rename_m'
              borderType='borderless'
              class={'tr-input-form'}
              clearable
              labelPosition='top'
              v-model={targetName.value}
              label={$q.lang.queryPlan.dialog.planName}
            />
          </t-card-section>
        </t-card>
      </tm-dialog>
    );
  };

  return {
    planChangeNotify,
    renameDialog:
      ($q.screen.xs || $q.platform.is.mobile) && mappingProps.planType == '1'
        ? renameDialogMobile
        : renameDialog,
    saveAsComponent:
      ($q.screen.xs || $q.platform.is.mobile) && mappingProps.planType == '1'
        ? saveAsComponentMobile
        : saveAsComponent,
  };
};
